<%-- 
    Document   : add
    Created on : 23.10.2010, 13:01:09
    Author     : nico.rehwaldt
--%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="u" uri="http://nixis.de/jsp/tags/core" %>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<html>
    <head>
        <title>Add dependencies for ${it.title}</title>
    </head>
    <body>
        <h1>Add dependencies</h1>
        <p>
            Use the search box below to find and add tasks this task depends on.
        </p>
        
        <p id="article-search">
            <input class="autocomplete" />
        </p>
        
        <form method="post" class="ajax" action="<u:url value="/article/${it.id}/addDependencies" />" style="display: none;">
            <fieldset class="dependencies"></fieldset>
            <fieldset>
                <input type="submit" value="submit"/>
            </fieldset>
        </form>
        
        <script type="text/javascript">

            (function() {

                var exclusions = [${it.id}];
                
                $("#article-search .autocomplete").autocomplete({
                    source: function(request, response) {
                        $.getJSON("<u:url value="/search" />", {term: request.term }, function(data, status) {
                            var result = (data != null ? data.articleInfo : []);
                            
                            var filtered = $.map(result, function(e) {
                                var excluded = $.grep(exclusions, function(c) { return c == e.id; }).length > 0;
                                return excluded ? null : e;
                            });
                            
                            response(filtered);
                        });
                    },
                    select: function(event, ui) {
                        if (ui.item) {
                            $(this)
                                .val("")
                                .parents(".ui-dialog")
                                .find(".dependencies")
                                .append("<span style='display: block'><input type='hidden' name='dependency' value='" + ui.item.id + "' />" + ui.item.title + "<input class='remove-dependency-button' type='button' value='-' /></span>")
                                .find(".remove-dependency-button").click(function() {
                                    $(this).parents("span").remove();
                                    var id = parseInt($(this).siblings("input[type=hidden]").val());
                                    
                                    exclusions = $.map(exclusions, function(e) {
                                        return (e == id ? null : e);
                                    });
                                }).parents("form").show();

                             exclusions.push(ui.item.id);
                        }
                    }
                }).data("autocomplete")._renderItem = function(ul, item) {
                        return $("<li></li>")
                            .data("item.autocomplete", item)
                            .append("<a>" + item.title + "</a>")
                            .appendTo(ul);
                };
            })();
        </script>
    </body>
</html>